<template>
  <el-card class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="店铺差评数据统计" name="store">
        <el-row :gutter="50" type="flex" style="margin-top: 0px">
          <el-col :span="24">
            <div>
              <el-form size="mini" inline>
                <el-form-item>
                  <el-select v-model="formData.dateRange4Store.storeId" clearable placeholder="请选择店铺" filterable>
                    <el-option v-for="store in storeList" :key="store.value" :value="store.value" :label="store.label"/>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-date-picker
                    v-model="formData.dateRange4Store.dateRange"
                    type="daterange"
                    range-separator="至"
                    value-format="yyyy-MM-dd"
                    style="width: 250px"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button @click="loadRevocationRateByStore" type="primary">搜索</el-button>
                  <el-button @click="exportRevocationRateByStore" type="danger">导出</el-button>
                </el-form-item>
              </el-form>
              <div class="data-table">
                <table v-loading="revocationRateByStoreLoading">
                  <thead>
                  <tr>
                    <th style="min-width: 100px">
                      店铺名
                    </th>
                    <th width="90px">
                      店铺差评汇总
                    </th>
                    <th width="90px">
                      差评待处理
                    </th>
                    <th width="110px">
                      店铺差评成立汇总
                    </th>
                    <th width="110px">
                      店铺差评撤销汇总
                    </th>
                    <th style="min-width: 100px">
                      店铺差评赔付金额汇总
                    </th>
                    <th width="100px">
                      店铺差评撤销率
                    </th>
                    <th style="min-width: 100px">
                      店铺差评赔付金额占比
                    </th>
                    <th width="120px">
                      去年同期差评汇总
                    </th>
                    <th style="min-width: 100px">
                      去年同期差评撤销汇总
                    </th>
                    <th width="140px">
                      去年同期差评赔付汇总
                    </th>
                    <th width="100px">
                      差评环比增长率
                    </th>
                    <th width="120px">
                      差评撤销环比增长率
                    </th>
                    <th width="120px">
                      差评赔付环比增长率
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="(item,itemIndex) in revocationRateByStore" :key="itemIndex">
                    <td align="center">
                      {{ item.storeTitle }}
                    </td>
                    <td align="center">
                      {{ item.totalNum }}
                    </td>
                    <td align="center">
                      {{ item.totalNum - item.badNum - item.backOutNum }}
                    </td>
                    <td align="center">
                      {{ item.badNum }}
                    </td>
                    <td align="center">
                      {{ item.backOutNum }}
                    </td>
                    <td align="center">
                      {{ item.payOutAmount }}
                    </td>
                    <td align="center">
                      {{ item.backOutNumPercent }}%
                    </td>
                    <td align="center">
                      {{ item.payOutAmountPercent }}%
                    </td>
                    <td align="center">
                      {{ item.lastYearTotalNum }}
                    </td>
                    <td align="center">
                      {{ item.lastYearBackOutNum }}
                    </td>
                    <td align="center">
                      {{ item.lastYearPayOutAmount }}
                    </td>
                    <td align="center">
                      {{ item.totalNumAddPercent }}%
                    </td>
                    <td align="center">
                      {{ item.backOutNumAddPercent }}%
                    </td>
                    <td align="center">
                      {{ item.payOutAmountAddPercent }}%
                    </td>
                  </tr>
                  </tbody>
                </table>
                <el-empty v-if="!revocationRateByStore.length && !revocationRateByStoreLoading">

                </el-empty>
                <!--            <chart :option="storeBackoutRateOption"/>-->
                <!--            <el-table-->
                <!--              :data="revocationRateByStore"-->
                <!--              v-loading="revocationRateByStoreLoading"-->
                <!--              style="width: 100%">-->
                <!--              <el-table-column-->
                <!--                prop="storeTitle"-->
                <!--                label="店铺名"-->
                <!--                width="120">-->
                <!--              </el-table-column>-->
                <!--              <el-table-column-->
                <!--                prop="totalNum"-->
                <!--                label="跟进记录总数"-->
                <!--                width="120">-->
                <!--              </el-table-column>-->
                <!--              <el-table-column-->
                <!--                prop="backOutNum"-->
                <!--                label="撤销记录总数"-->
                <!--                width="120"-->
                <!--              >-->
                <!--              </el-table-column>-->
                <!--              <el-table-column-->
                <!--                prop="payOutAmount"-->
                <!--                label="赔付金额"-->
                <!--                width="120"-->
                <!--              >-->
                <!--                <template slot-scope="scope">-->
                <!--                  <div>￥{{ scope.row.payOutAmount }}</div>-->
                <!--                </template>-->
                <!--              </el-table-column>-->
                <!--              <el-table-column-->
                <!--                prop="rate"-->
                <!--                label="撤销率"-->
                <!--                width="auto">-->
                <!--                <template slot-scope="scope">-->
                <!--                  <div>{{ scope.row.rate * 100 | percentFormat }}%</div>-->
                <!--                </template>-->
                <!--              </el-table-column>-->
                <!--            </el-table>-->
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="pt30">
          <el-row :gutter="20">
            <el-col :span="12">
              <chart :option="storeBackoutTotalNumOption"/>
            </el-col>
            <el-col :span="12">
              <chart :option="storeBackoutBadNumOption"/>
            </el-col>
          </el-row>
        </div>
        <div class="pt30">
          <el-row :gutter="20">
            <el-col :span="12">
              <chart :option="storeBackoutNumOption"/>
            </el-col>
            <el-col :span="12">
              <chart :option="storePayoutAmountOption"/>
            </el-col>
          </el-row>
        </div>
        <div class="pt30">
          <el-row :gutter="20">
            <el-col :span="12">
              <chart :option="storeBackoutPercentOption"/>
            </el-col>
            <el-col :span="12">
              <chart :option="storePayOutAmountPercentOption"/>
            </el-col>
          </el-row>
        </div>

      </el-tab-pane>
      <el-tab-pane label="个人跟进差评数据统计" name="user">
        <el-row :gutter="50" type="flex" style="margin-top: 0px">
          <el-col :span="24">
            <div>
              <el-form size="mini" inline>
                <el-form-item>
                  <el-select filterable v-model="formData.dateRange4Follower.userId" clearable placeholder="请选择人员">
                    <el-option v-for="store in userList" :key="store.value" :value="store.value" :label="store.label"/>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-date-picker
                    v-model="formData.dateRange4Follower.dateRange"
                    type="daterange"
                    range-separator="至"
                    value-format="yyyy-MM-dd"
                    style="width: 250px"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button @click="loadRevocationRateByFollower" type="primary">搜索</el-button>
                  <el-button @click="exportRevocationRateByFollower" type="danger">导出</el-button>
                </el-form-item>
              </el-form>
              <div class="data-table">
                <table v-loading="revocationRateByFollowerLoading">
                  <thead>
                  <tr>
                    <th>
                      姓名
                    </th>
                    <th>
                      差评撤销汇总
                    </th>
                    <th>
                      差评成立汇总
                    </th>
                    <th>
                      差评赔付金额汇总
                    </th>
                    <th>
                      差评赔付平均金额
                    </th>
                    <th>
                      差评撤销占比
                    </th>
                    <th>
                      差评赔付金额占比
                    </th>
                    <th>
                      差评撤销排名
                    </th>
                    <th>
                      较上月排名
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="(item,itemIndex) in revocationRateByFollower" :key="itemIndex">
                    <td align="center">
                      {{ item.followerName }}
                    </td>
                    <td align="center">
                      {{ item.backOutNum }}
                    </td>
                    <td align="center">
                      {{ item.badNum }}
                    </td>
                    <td align="center">
                      {{ item.payOutAmount }}
                    </td>
                    <td align="center">
                      {{ item.avePayOutAmount }}
                    </td>
                    <td align="center">
                      {{ item.backOutNumOwnerPercent }}%
                    </td>
                    <td align="center">
                      {{ item.payOutAmountOwnerPercent }}%
                    </td>
                    <td align="center">
                      {{ item.ranking }}
                    </td>
                    <td align="center">
                      <span v-if="item.deltaRanking>0">+</span> {{ item.deltaRanking }}
                    </td>
                  </tr>
                  </tbody>
                </table>
                <el-empty v-if="!revocationRateByFollower.length && !revocationRateByFollowerLoading">

                </el-empty>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="pt30">
          <el-row :gutter="20">
            <el-col :span="12">
              <chart :option="followerBackOutNumOption"/>
            </el-col>
            <el-col :span="12">
              <chart :option="followerBadNumOption"/>
            </el-col>
          </el-row>
        </div>
        <div class="pt30">
          <el-row :gutter="20">
            <el-col :span="12">
              <chart :option="followerPayOutAmountOption"/>
            </el-col>
            <el-col :span="12">
              <chart :option="followerAvePayoutAmountOption"/>
            </el-col>
          </el-row>
        </div>
        <div class="pt30">
          <el-row :gutter="20">
            <el-col :span="12">
              <chart :option="followerBackOutNumOwnerPercentOption"/>
            </el-col>
            <el-col :span="12">
              <chart :option="followerPayOutAmountOwnerPercentOption"/>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
    <loading-dialog v-model="isExporting" loading-text="正在导出，请稍等"/>
  </el-card>
</template>

<script>
import {voteBadCommentApi} from "@/feature/cmt/infra/api/voteBadCommentApi";
import LineChart from "@/components/chart/LineChart";
import RaddarChart from "@/components/chart/RaddarChart";
import PieChart from "@/components/chart/PieChart";
import BarChart from "@/components/chart/BarChart";
import Chart from "@/components/chart/Chart";
import ObjectUtil from "@/framework/infra/object/ObjectUtil";
import ColumnUtil from "@/framework/components/table/ColumnUtil";
import ExcelUtil from "@/framework/infra/excel/ExcelUtil";
import LoadingDialog from "@/framework/components/dialog/LoadingDialog";
import {storeApi} from "@/feature/mct/infra/api/storeApi";
import {adminApi} from "@/feature/mgr/infra/api/adminApi";
import moment from "moment";

export default {
  components: {LoadingDialog, Chart, BarChart, PieChart, RaddarChart, LineChart},
  created() {
    this.loadRevocationRateByStore()
    this.loadStoreList()
    this.loadUserList()
  },
  filters: {
    percentFormat(v) {
      return v.toFixed(2)
    }
  },
  watch: {
    activeName() {
      if (this.activeName === 'store') {
        this.loadRevocationRateByStore()
      } else {
        this.loadRevocationRateByFollower()
      }
    }
  },
  computed: {
    storeBackoutTotalNumOption() {
      return this.storePicOption('店铺差评汇总', this.revocationRateByStore, 'totalNum')
    },
    storeBackoutBadNumOption() {
      return this.storePicOption('店铺差评成立汇总', this.revocationRateByStore, 'badNum', '', 10)
    },
    storeBackoutNumOption() {
      return this.storePicOption('店铺差评撤销汇总', this.revocationRateByStore, 'backOutNum', '')
    },
    storePayoutAmountOption() {
      return this.storePicOption('店铺差评赔付金额汇总', this.revocationRateByStore, 'payOutAmount', '')
    },
    storeBackoutPercentOption() {
      return this.storePicOption('店铺差评撤销率', this.revocationRateByStore, 'backOutNumPercent', '%', 100)
    },
    storePayOutAmountPercentOption() {
      return this.storePicOption('店铺差评赔付金额占比', this.revocationRateByStore, 'payOutAmountPercent', '%', 100)
    },
    followerBackOutNumOption() {
      return this.storePicOption('差评撤销汇总', this.revocationRateByFollower, 'backOutNum', '')
    },
    followerBadNumOption() {
      return this.storePicOption('差评成立汇总', this.revocationRateByFollower, 'badNum', '')
    },
    followerPayOutAmountOption() {
      return this.storePicOption('差评赔付金额汇总', this.revocationRateByFollower, 'payOutAmount', '')
    },
    followerAvePayoutAmountOption() {
      return this.storePicOption('差评赔付平均金额', this.revocationRateByFollower, 'avePayOutAmount', '')
    },
    followerBackOutNumOwnerPercentOption() {
      return this.storePicOption('差评撤销占比', this.revocationRateByFollower, 'backOutNumOwnerPercent', '%', 100)
    },
    followerPayOutAmountOwnerPercentOption() {
      return this.storePicOption('差评赔付金额占比', this.revocationRateByFollower, 'payOutAmountOwnerPercent', '%', 100)
    }
  },
  data() {
    return {
      activeName: 'store',
      isExporting: false,
      storeList: [],
      userList: [],
      formData: {
        dateRange4Store: {
          storeId: '',
          userId: '',
          dateRange: [
            // moment().add('month', -1).startOf('month').format('YYYY-MM-DD'),
            moment().startOf('month').format('YYYY-MM-DD'),
            moment().format('YYYY-MM-DD')
          ]
        },
        dateRange4Follower: {
          storeId: '',
          userId: '',
          dateRange: [
            // moment().add('month', -1).startOf('month').format('YYYY-MM-DD'),
            moment().startOf('month').format('YYYY-MM-DD'),
            moment().format('YYYY-MM-DD')
          ]
        }
      },
      totalRevocationRate: 0,
      revocationRateByStoreLoading: false,
      revocationRateByFollowerLoading: false,
      revocationRateByStore: [],
      revocationRateByFollower: []
      // ,
      // lineChartData: {
      //   expectedData: [100, 120, 161, 134, 105, 160, 165],
      //   actualData: [120, 82, 91, 154, 162, 140, 145]
      // }
    }
  },

  methods: {
    storePicOption(title, data, field, unit = '', max = null) {
      return {
        backgroundColor: '#ffffff',
        // color: {
        //   type: 'linear',
        //   x: 0,
        //   y: 0,
        //   x2: 0,
        //   y2: 1,
        //   colorStops: [{
        //     offset: 0, color: 'red' // 0% 处的颜色
        //   }, {
        //     offset: 1, color: 'blue' // 100% 处的颜色
        //   }],
        //   global: false // 缺省为 false
        // },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {backgroundColor: '#ffffff'}
        //   }
        // },
        // title: {
        //   text: title
        // },
        // toolbox: {feature: {saveAsImage: {backgroundColor: '#000000'}}},
        title: {
          text: title,
          // subtext: 'Fake Data',
          left: 'center'
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        // legend: {
        //   data: ['撤销率']
        // },
        tooltip: {
          trigger: 'item',
          // trigger: 'axis',
          formatter: param => {
            // console.log(params)
            // const param = params[0]
            return param.name.replace(param.value + unit, '') + ' ' + param.marker + param.value + unit
          }
          // axisPointer: { // 坐标轴指示器，坐标轴触发有效
          //   type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          // }
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        // xAxis: {
        //   type: 'category',
        //   axisTick: {
        //     alignWithLabel: true
        //   },
        //   data: data.filter(el => el.storeTitle !== '汇总' && el.followerName !== '汇总').map(el => el.storeTitle || el.followerName)
        // },
        // yAxis: {
        //   type: 'value',
        //   max,
        //   // max: 100,
        //   axisTick: {
        //     show: false
        //   },
        //   axisLabel: {
        //     formatter: '{value}' + unit
        //   }
        // },
        series: [
          // {
          //   data: data.filter(el => el.storeTitle !== '汇总' && el.followerName !== '汇总').map(el => el[field]),
          //   barWidth: '20%',
          //   type: 'bar',
          //   name: title,
          //   showBackground: true,
          //
          //   backgroundStyle: {
          //     color: 'rgba(180, 180, 180, 0.2)'
          //   }
          // }
          {
            // name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: data.filter(el => el.storeTitle !== '汇总' && el.followerName !== '汇总').map(el => ({
              value: el[field],
              name: (el.storeTitle || el.followerName) + ' ' + el[field] + unit
            })),
            // data: [
            //   { value: 1048, name: 'Search Engine' },
            //   { value: 735, name: 'Direct' },
            //   { value: 580, name: 'Email' },
            //   { value: 484, name: 'Union Ads' },
            //   { value: 300, name: 'Video Ads' }
            // ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    },
    loadStoreList() {
      storeApi.options().then(data => {
        this.storeList = data
      })
    },
    loadUserList() {
      adminApi.listAll().then(data => {
        this.userList = data
      })
    },
    // loadTotalRevocationRate() {
    //   voteBadCommentApi.queryTotalRevocationRate().then(data => {
    //     this.totalRevocationRate = data * 100
    //   })
    // },
    exportRevocationRateByStore() {
      this.isExporting = true
      voteBadCommentApi.queryRevocationRateByStore(this.formData.dateRange4Store).then(data => {
        const header = ['店铺名', '店铺差评汇总', '差评待处理', '店铺差评成立汇总', '店铺差评撤销汇总', '店铺差评赔付金额汇总', '店铺差评撤销率',
          '店铺差评赔付金额占比', '去年同期差评汇总',
          '去年同期差评撤销汇总', '去年同期差评赔付汇总', '差评环比增长率',
          '差评撤销环比增长率', '差评赔付环比增长率']
        const exportedData = []
        if (data && data.length) {
          for (const row of data) {
            exportedData.push([
              row.storeTitle,
              row.totalNum,
              row.totalNum - row.badNum - row.backOutNum,
              row.badNum,
              row.backOutNum,
              row.payOutAmount,
              row.backOutNumPercent + '%',
              row.payOutAmountPercent + '%',
              row.lastYearTotalNum,
              row.lastYearBackOutNum,
              row.lastYearPayOutAmount,
              row.totalNumAddPercent + '%',
              row.backOutNumAddPercent + '%',
              row.payOutAmountAddPercent + '%'
            ])
          }
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '店铺差评统计'
        })
      }).finally(() => {
        this.isExporting = false
      })
    },
    loadRevocationRateByStore() {
      this.revocationRateByStoreLoading = true
      voteBadCommentApi.queryRevocationRateByStore(this.formData.dateRange4Store).then(data => {
        this.revocationRateByStore = data
      }).finally(() => {
        this.revocationRateByStoreLoading = false
      })
    },
    loadRevocationRateByFollower() {
      this.revocationRateByFollowerLoading = true
      voteBadCommentApi.queryRevocationRateByFollowerId(this.formData.dateRange4Follower).then(data => {
        this.revocationRateByFollower = data
      }).finally(() => {
        this.revocationRateByFollowerLoading = false
      })
    },
    exportRevocationRateByFollower() {
      this.isExporting = true
      voteBadCommentApi.queryRevocationRateByFollowerId(this.formData.dateRange4Follower).then(data => {
        const header = ['姓名', '差评撤销汇总', '差评成立汇总', '差评赔付金额汇总', '差评赔付平均金额', '差评撤销占比', '差评赔付金额占比', '差评撤销排名', '较上月排名']
        const exportedData = []
        if (data && data.length) {
          for (const row of data) {
            exportedData.push([row.followerName, row.backOutNum, row.badNum,
              row.payOutAmount, row.avePayOutAmount, row.backOutNumOwnerPercent,
              row.payOutAmountOwnerPercent,
              row.ranking,
              (row.deltaRanking > 0 ? '+' : '') + (row.deltaRanking === null ? '' : row.deltaRanking)
            ])
          }
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '跟进人差评撤销率统计'
        })
      }).finally(() => {
        this.isExporting = false
      })
    }
  }
}
</script>

<style scoped lang="scss">

.card_fitTitle {
  font-size: 14px;
  color: #999;
  padding-bottom: 10px;

}

.center {
  text-align: center;
}

.card-num {
  font-size: 24px;
  padding-bottom: 10px;
}

.card-unit {
  font-size: 12px;
}

.news {

  &__sep {
    margin: 0 15px;
  }

  &__content {
    color: #999;
  }

}

.card-txt {
  font-size: 14px;
}

.short-cut {
  text-align: center;
  font-size: 14px;
  margin-bottom: 15px;
  float: left;
  margin-right: 30px;
}

.short-cuts-content {
  overflow: hidden;
  box-sizing: border-box;
}

.short-icon {
  display: block;
  font-size: 30px;
  margin-bottom: 5px;
}

.short-cuts-title {
  padding-bottom: 30px;
}

.todolist {
  padding: 50px 0 10px 0;
}


.todolist .el-row {
  padding-bottom: 15px;
}

.todo-title {
  padding-bottom: 30px;
  font-size: 18px;
  font-weight: bold;
}

.short-cuts-title {
  font-size: 18px;
  font-weight: bold;
}

.todo-block {
  text-align: center;
  display: inline-block;
  width: 120px;
  margin-bottom: 20px;
}

.todo-txt {
  font-size: 14px;
}

.todo-block .todo-num {
  font-size: 18px;
  padding-bottom: 10px;
}
</style>
